<template>
	<div>
		<!-- 页面内容 -->

		<div
			class="dock"
			:class="{ 'dock-hidden': dockHidden }"
		>
			<!-- 底部 Dock 栏内容 -->
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dockHidden: false, // 初始状态设置为显示
				prevScrollPosition: 0, // 用于跟踪上一个滚动位置
			};
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll);
		},
		beforeDestroy() {
			window.removeEventListener('scroll', this.handleScroll);
		},
		methods: {
			handleScroll() {
				// 获取当前页面顶部距离
				const topDistance =
					window.pageYOffset || document.documentElement.scrollTop;

				// 设置一个阈值，以便确定何时开始显示/隐藏 Dock 栏
				const threshold = 200;

				// 检测滚动方向
				if (topDistance > this.prevScrollPosition) {
					// 向下滚动，隐藏 Dock 栏
					this.dockHidden = true;
				} else {
					// 向上滚动，显示 Dock 栏
					this.dockHidden = false;
				}

				// 更新上一个滚动位置
				this.prevScrollPosition = topDistance;
			},
		},
	};
</script>

<style scoped>
	.dock {
		/* 样式设置，可以根据您的需求自定义 */
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #333;
		color: #fff;
		padding: 10px;
		transition: transform 0.3s;
	}

	.dock.dock-hidden {
		transform: translateY(100%);
	}
</style>
